<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-02-01 10:38:33
 * @LastEditTime : 2021-02-01 15:57:12
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-grid\example5.vue
-->
<template>
  <div>
    <CloudDivider orientation="left">
      Percentage columns
    </CloudDivider>
    <CloudRow type="flex">
      <CloudCol :flex="2">2 / 5</CloudCol>
      <CloudCol :flex="3">3 / 5</CloudCol>
    </CloudRow>
    <CloudDivider orientation="left">
      Fill rest
    </CloudDivider>
    <CloudRow type="flex">
      <CloudCol flex="100px">100px</CloudCol>
      <CloudCol flex="auto">auto</CloudCol>
    </CloudRow>
    <CloudDivider orientation="left">
      Raw flex style
    </CloudDivider>
    <CloudRow type="flex">
      <CloudCol flex="1 1 200px">1 1 200px</CloudCol>
      <CloudCol flex="0 1 300px">0 1 300px</CloudCol>
    </CloudRow>
  </div>
</template>
<script>
export default {
  title: '5.Flex 填充',
  subTitle: 'Col 提供 flex 属性以支持填充。',
  data() {
    return {}
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.grid-box {
  text-align: center;
}
.ant-col {
  text-align: center;
  color: #ffffff;
  margin-top: 8px;
  margin-bottom: 8px;
}
.ant-row-flex {
  background: #f5f5f5;
}
.ant-row-flex > div:not(.gutter-row):nth-child(odd),
.ant-row > div:not(.gutter-row):nth-child(odd),
.ant-row-flex > div:not(.gutter-row):nth-child(odd),
.ant-row > div:not(.gutter-row):nth-child(odd) {
  background: rgba(0, 160, 233, 0.7);
}
.ant-row-flex > div:not(.gutter-row),
.ant-row > div:not(.gutter-row),
.ant-row-flex > div:not(.gutter-row),
.ant-row > div:not(.gutter-row) {
  background: #00a0e9;
  padding: 16px 0;
}
</style>